<!-- 财务中心驾驶舱详细页面 -->
<template>
    <div class="roomDetail">
        <div class="selectValue">
            <label class="value"> {{ name }}</label>
            <div class="rightValue">
                <span class="cursor" @click="currentClick('设备数')">
                    设备数：<b>{{ sbInfo.total_eq_count ?? 0 }}台</b>
                </span>
                <span class="cursor" @click="currentClick('在线')">
                    <label class="green"> </label>
                    在线：<b>{{ sbInfo.is_online }}台</b>
                </span>
                <span class="cursor" @click="currentClick('离线')">
                    <label class="gray"> </label>
                    离线：<b>{{ sbInfo.offline_device }}台</b>
                </span>
                <span class="cursor" @click="currentClick('告警')">
                    <label class="red"> </label>
                    告警：<b>{{ sbInfo.alarm_sb }}台</b>
                </span>
                <span class="cursor" @click="currentClick('欠费')">
                    <label class="orange"> </label>
                    欠费：<b>{{ sbInfo.alarm_overdue }}台</b>
                </span>
            </div>
        </div>
        <div class="gjw-list">
            <div class="gjw-list-list" :style="{height: getHeight()}">
                <div v-if="listData.length == 0" class="noData">暂无数据</div>
                <div v-else>
                    <div class="gjw-list-item">
                        <div class="item" v-for="(item, index) in listData" v-bind:key="index" @dblclick.stop="onJiaoFei(child)">
                            <div class="item-header" :class="getUserTopHeader(item)">
                                <img :src="getImg()" style="margin: 4.5px 6px 0 10px; width: 26px; height: 26px" />
                                <el-tooltip :content="item.ac_name" placement="top">
                                    <label style="font-size: 15px">{{ item.ac_name }}</label></el-tooltip
                                >
                                <div class="rightItemList">
                                    <span class="warn">
                                        <el-tooltip content="刷新" placement="top">
                                            <img src="@/assets/images/monitor/refresh.png"
                                        /></el-tooltip>
                                    </span>
                                    <span class="qf" v-if="item.eqs.length > 1" @click="showMoreDevice(item)">
                                        <el-tooltip content="加载更多" placement="top" v-if="!item.showMore">
                                            <i class="bi bi-caret-down"></i
                                        ></el-tooltip>
                                        <el-tooltip content="收起更多" placement="top" v-if="item.showMore">
                                            <i class="bi bi-caret-up"></i
                                        ></el-tooltip>
                                    </span>
                                </div>
                            </div>
                            <div class="item-bottom" :class="getUserTopHeader(item) + 'bottomBorder'">
                                <div
                                    class="item-bottom-money"
                                    :class="getTopHeaderClass(item) + 'Color'"
                                    @contextmenu.prevent="handleRightClick(item, true)"
                                    @mouseleave="item.showMenu = false"
                                >
                                    余额：{{ parseFloat(item.ac_sum).toFixed(2) }}元
                                </div>
                                <div
                                    class="item-bottom-device"
                                    v-for="child in item.eqs"
                                    @click="gotoDetail(child)"
                                    v-bind:key="child.eq_guid"
                                >
                                    <div v-if="child.show">
                                        <el-tooltip placement="left" effect="light">
                                            <div
                                                slot="content"
                                                style="font-size: 14px; display: flex; flex-direction: column; gap: 5px; text-align: left"
                                            >
                                                <div :class="getTopHeaderClass(child) + 'Color'">
                                                    {{ child.eq_name }}
                                                </div>
                                                <div>最新采集：{{ child.lately_time }}</div>
                                                <div>最新计算：{{ child.com_time }}</div>
                                                <div>数据状态：{{ child.status == '0' ? '正常' : '异常' }}</div>
                                            </div>

                                            <div
                                                class="item-bottom-device-item"
                                                @contextmenu.prevent="handleRightClick(child, false)"
                                                @mouseleave="item.showMenu = false"
                                            >
                                                <div class="itemContextMenu" v-if="child.showMenu" @mouseleave="child.showMenu = false">
                                                    <div @click.stop="onJiaoFei(child)">
                                                        <img src="@/assets/images/monitor/jiaofei.png" />
                                                        缴费
                                                    </div>

                                                    <div @click.stop="onTuiFei(child)">
                                                        <img src="@/assets/images/monitor/tuifei.png" />
                                                        退费
                                                    </div>
                                                    <div @click.stop="onQingLing(child)">
                                                        <img src="@/assets/images/monitor/qingling.png" />
                                                        清零
                                                    </div>
                                                    <div @click.stop="onXiaoHu(child)">
                                                        <img src="@/assets/images/monitor/xiaohu.png" />
                                                        销户
                                                    </div>
                                                    <div @click.stop="onHuanBiao(child)" v-if="!isYe">
                                                        <img src="@/assets/images/monitor/huanbiao.png" />
                                                        换表
                                                    </div>
                                                    <!-- <div @click.stop="onZgl(child)" v-if="child.eq_type == '01' && !isYe">
                                                        <img src="@/assets/images/monitor/zglshz.png" />
                                                        总功率设置
                                                    </div> -->
                                                    <!-- 电表才有下面这个设置 -->
                                                    <div @click.stop="onExfz(child)" v-if="child.eq_type == '01' && !isYe">
                                                        <img src="@/assets/images/monitor/exfzsz.png" />
                                                        负载设置
                                                    </div>
                                                    <div v-if="!isYe">
                                                        <img src="@/assets/images/monitor/ynmxcx.png" />
                                                        用能明细查询
                                                    </div>
                                                    <div>
                                                        <img src="@/assets/images/monitor/jtfmxcx.png" />
                                                        缴退费明细查询
                                                    </div>
                                                </div>
                                                <div class="item-header" :class="getTopHeaderClass(child)">
                                                    <img
                                                        :src="getImg2(child.eq_type)"
                                                        style="margin: 4.5px 6px 0 10px; width: 26px; height: 26px"
                                                    />
                                                    <!-- <el-tooltip :content="item.eq_name" placement="top"> -->
                                                    <label style="font-size: 13px">{{ child.eq_name }}</label>
                                                    <!-- </el-tooltip
                                                > -->
                                                    <div class="rightItemList">
                                                        <!-- switch_state是否合闸（0合闸1分闸） -->
                                                        <span class="warn" v-if="(child.switch_state = '0')">
                                                            <el-tooltip content="分闸" placement="top">
                                                                <img
                                                                    src="@/assets/images/monitor/hezha.png"
                                                                    style="width: 26px; height: 26px; margin-top: 4.5px"
                                                                    @click.stop="fhzClick(child)"
                                                            /></el-tooltip>
                                                        </span>
                                                        <span class="warn" v-else>
                                                            <el-tooltip content="合闸" placement="top">
                                                                <img
                                                                    src="@/assets/images/monitor/fenzha.png"
                                                                    style="width: 26px; height: 26px; margin-top: 4.5px"
                                                                    @click.stop="fhzClick(child)"
                                                            /></el-tooltip>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div
                                                    v-if="child.eq_type == '01'"
                                                    class="item-bottom-device-item-content"
                                                    :class="getTopHeaderClass(child) + 'Border'"
                                                >
                                                    月用量：{{ parseFloat(child.diff_value).toFixed(2) }}kwh
                                                </div>
                                                <div
                                                    v-if="child.eq_type == '02'"
                                                    class="item-bottom-device-item-content"
                                                    :class="getTopHeaderClass(child) + 'Border'"
                                                >
                                                    月用量：{{ parseFloat(child.diff_value).toFixed(2) }}m³
                                                </div>
                                            </div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gjw-list-page" v-if="listData.length > 0">
                    <el-pagination
                        background
                        :layout="hasIsSizes ? 'prev, pager, next,total,sizes' : 'prev, pager, next,total'"
                        :total="count"
                        :page-size="size"
                        :current-page="current"
                        @current-change="pageChange"
                        :page-sizes="pageSizes"
                        @size-change="handleSizeChange"
                    >
                        >
                    </el-pagination>
                </div>
            </div>
        </div>

        <xiaohu v-if="showXiaoHu" @onClose="showXiaoHu = false"></xiaohu>
        <huanbiao v-if="showHuanBiao" @onClose="showHuanBiao = false"></huanbiao>
        <eXinFuZai :selectItem="selectItem" v-if="showExfz" @onClose="showExfz = false"></eXinFuZai>
        <zongGLKZ v-if="showZgl" @onClose="showZgl = false"></zongGLKZ>
        <jiaofei v-if="showJiaoFei" @onClose="jiaofeiSuccess()" :selectItem="selectItem"></jiaofei>
        <tuiFei v-if="showTuiFei" @onClose="tuifeiSuccess()" :selectItem="selectItem"></tuiFei>
        <qingLing v-if="showQingLing" @onClose="showQingLing = false"></qingLing>
    </div>
</template>

<script>
import {listData} from '@/mockData/monitorCenter.js'
import {AjaxCommon} from '@/libs/apiCommon'
import {Utility} from '@/libs/utility.js'
import xiaohu from '../financialCenter/deviceOpr/xiaohu'
import huanbiao from '../financialCenter/deviceOpr/huanbiao'
import eXinFuZai from '../financialCenter/deviceOpr/eXinFuZai'
import zongGLKZ from '../financialCenter/deviceOpr/zongGLKZ'
import jiaofei from '../financialCenter/deviceOpr/jiaofei.vue'
import tuiFei from '../financialCenter/deviceOpr/tuiFei.vue'
import qingLing from '../financialCenter/deviceOpr/qingLing'
export default {
    props: ['name', 'data', 'listTreeData', 'type', 'sbxq'],
    components: {xiaohu, huanbiao, eXinFuZai, zongGLKZ, jiaofei, tuiFei, qingLing},
    data() {
        return {
            showQingLing: false,
            showTuiFei: false,
            showJiaoFei: false,
            showZgl: false,
            showXiaoHu: false,
            showHuanBiao: false,
            showExfz: false,
            hasIsSizes: true,
            count: 1,
            size: 20,
            current: 1,
            listData: [],
            // sbxq: {},
            pageSizes: [],
            isYe: false,
            selectItem: {},
            sbInfo: {}
        }
    },
    watch: {
        sbxq: {
            handler(n) {
                if (n && typeof n?.total_eq_count != 'undefined') {
                    this.sbInfo = n
                }
            },
            immediate: true
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        jiaofeiSuccess() {
            this.showJiaoFei = false
            this.refreshData()
        },
        tuifeiSuccess() {
            this.showTuiFei = false
            this.refreshData()
        },
        fhzClick(deviceInfo) {
            const eq_guid = deviceInfo.eq_guid
            const self = this
            this.$prompt('请输入密码', `提示：${deviceInfo.switch_state == '0' ? '分闸' : '合闸'}前请输入密码`, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputType: 'password',
                inputPattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#+$%^&*]).+$/,
                inputErrorMessage: '密码需包含数字、字母及至少一个特殊字符(!@#+$%^&*)'
            })
                .then(({value}) => {
                    AjaxCommon(`/api/Eq/PdPassword?Password=${value}`, 'post', {}).then(async (res) => {
                        console.log(res)
                        if (res.data.Message == 'ok') {
                            // 设备合闸操作，后台加HIS记录 操作成功返回1，返回2合闸操作成功,设备状态未更新。 返回其它操作失败 如 返回-1说明终端通迅异常网关正常 返回 ""或null 网关和终端通迅异
                            // 分合闸（0合闸 1分闸）
                            let result = null
                            if (deviceInfo.switch_state == '0') {
                                // 去分闸
                                result = await AjaxCommon(`/api/Eq/GetEqRtClose?eqid=${eq_guid}`, 'post', {})
                            } else {
                                // 去合闸
                                result = await AjaxCommon(`/api/Eq/GetEqRtOpen?eqid=${eq_guid}`, 'post', {})
                            }
                            if (result?.data?.Message == 1) {
                                PopupCommon.notify('success', '操作成功')
                                self.getData()
                                return
                            }
                            if (result?.data?.Message == 2) {
                                PopupCommon.notify('success', '操作成功，设备状态未更新')
                                self.getData()
                                return
                            }
                            PopupCommon.notify('error', '操作失败')
                        } else {
                            PopupCommon.notify('error', res.data.Message)
                        }
                    })
                })
                .catch(() => {
                    console.log('取消输入')
                })
        },
        onQingLing(item) {
            this.showQingLing = true
            item.showMenu = false
            this.selectItem = item
        },
        onTuiFei(item) {
            this.showTuiFei = true
            item.showMenu = false
            this.selectItem = item
        },
        onJiaoFei(item) {
            this.showJiaoFei = true
            item.showMenu = false
            this.selectItem = item
        },
        onZgl(item) {
            this.showZgl = true
            item.showMenu = false
            this.selectItem = item
        },
        onExfz(item) {
            console.log(item, 'item................')
            this.showExfz = true
            item.showMenu = false
            this.selectItem = item
        },
        onXiaoHu(item) {
            this.showXiaoHu = true
            item.showMenu = false
            this.selectItem = item
        },
        onHuanBiao(item) {
            this.showHuanBiao = true
            item.showMenu = false
            this.selectItem = item
        },
        showMoreDevice(item) {
            if (!item.showMore) {
                this.listData
                    .find((t) => t.ac_guid == item.ac_guid)
                    .eqs.map((t) => {
                        t.show = true
                        return t
                    })

                this.listData.find((t) => t.ac_guid == item.ac_guid).showMore = true
            } else {
                this.listData
                    .find((t) => t.ac_guid == item.ac_guid)
                    .eqs.map((t, i) => {
                        t.show = i == 0
                        return t
                    })

                this.listData.find((t) => t.ac_guid == item.ac_guid).showMore = false
            }
        },
        handleRightClick(item, isYe) {
            this.isYe = isYe
            if (isYe) {
                item.eqs[0].showMenu = true
            } else {
                item.showMenu = true
            }
        },
        /**
         * 设置页码和数据等
         * @param page 当前第几页
         * @param count 公共多少条数据
         * @param data 数据
         */
        setPageAndData(page, count, data, pageSizes) {
            this.pageSizes = pageSizes
            // 返回数据说明：
            // ac_guid账户GUID、
            // ac_id账户ID、
            // ac_type账户类型
            //  ac_name账户名称
            //  、ac_sum总剩余金额
            //  、ac_state账户状态（0：正常有效 1：被销户 2：被冻结 3：被合并）
            //  alarm_sum告警金额、
            //  over_sum透支额度
            //  二级子项
            //  eq_guid设备GUID、
            //  eq_name设备名称、
            //  eq_type设备类型（01电、02 水、03气）
            //   islocal是否启用本地预付费（0：不启用 1：启用）、
            //   diff_value本月用量、online是否在线(0离线 1在线)
            //    switch_state是否合闸（0合闸1分闸）、
            //    lately_time最近在线时间、
            //    com_time最近计算时间、
            //     hl回路（0总回路、1为1回路 、2为2回路）、
            //     status（0正常，其它异常）、is_open是否开户

            this.listData = data?.map((t, i) => {
                if (t?.eqs?.length > 1) {
                    t.showMore = false
                }
                t?.eqs?.map((b, index) => {
                    b.show = index == 0
                    b.showMenu = false
                    return b
                })
                return t
            })

            try {
                //分页后滚动到最上面
                document.getElementsByClassName('gjw-list-list')[0].scroll(0, 0)
            } catch (error) {}
            setTimeout(() => {
                this.current = page
                this.count = count
            }, 200)
        },
        handleSizeChange(e) {
            this.$emit('handleSizeChange', e)
        },
        pageChange(e) {
            this.$emit('pageChange', e)
        },
        getHeight() {
            return 'calc(100vh - 322px)'
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            this.$emit('currentClick', type)
        },
        /** 查看详情 */
        gotoDetail(item) {
            this.$emit('gotoDetail', item)
        },
        getImg() {
            return require('@/assets/images/monitor/accountWhite.png')
        },
        // 返回水电的图标
        getImg2(type) {
            /** 设备类型（01电表 02水表 03 气表等） */
            return type == '01' ? require('@/assets/images/monitor/elecWhite.png') : require('@/assets/images/monitor/waterWhite.png')
        },
        // 帐号头部背景色  欠费>离线>告警  在线：green 离线：gray 告警：red 欠费：orange
        getUserTopHeader(item) {
            // is_overdue is_overdue 是否欠费     is_alarm 是否告警  告警（alarm_sum>ac_sum）
            if (item.is_overdue == '1') {
                return 'orange'
            }
            if (parseFloat(item.alarm_sum) > parseFloat(item.ac_sum)) {
                return 'red'
            }
            return 'green'
        },
        // 根据设备状态来确定背景色
        getTopHeaderClass(item) {
            //   islocal是否启用本地预付费（0：不启用 1：启用）、
            //   diff_value本月用量、online是否在线(0离线 1在线)
            //    switch_state是否合闸（0合闸1分闸）、
            //    lately_time最近在线时间、
            //    com_time最近计算时间、
            //     hl回路（0总回路、1为1回路 、2为2回路）、
            //     status（0正常，其它异常）、is_open是否开户

            // is_alarm 是否告警
            if (item.is_alarm == '1') {
                return 'red'
            }
            if (item?.online == '1') {
                return 'green'
            }
            return 'gray'

            // //  在线：green 离线：gray 告警：red 欠费：orange
            // const value = parseInt(Math.random() * 1000)
            // if (value <= 200) {
            //     return 'gray'
            // } else if (value > 200 && value <= 400) {
            //     return 'green'
            // } else if (value > 400 && value <= 800) {
            //     return 'red'
            // } else {
            //     return 'orange'
            // }
        },
        // 获取是否在线
        getHeaderClass(level) {
            return level == '1' ? 'normal' : 'lx'
        },
        getBottomClass(type, level) {
            if (type == '01' && level) {
                return 'sbzc'
            } else if (type == '02' && level) {
                return 'dbzc'
            } else {
                return 'yc'
            }
        },
        // 获取告警设备
        getLevelImg(is_alarm) {
            return require('@/assets/images/monitor/warn2.png')
        },
        // 刷新列表
        refreshData() {
            this.$emit('refreshData', '')
        }
    }
}
</script>

<style scoped lang="scss">
@media screen and (max-width: 1450px) {
    .selectValue {
        .value {
            font-size: 14px !important;
        }
        .rightValue {
            span {
                font-size: 14px !important;
            }
        }
    }

    .gjw-list .gjw-list-list .gjw-list-item .item {
        width: calc((100% - 40px) / 4) !important;
    }
}

@media screen and (min-width: 1450px) {
    .selectValue {
        .value {
            font-size: 15px !important;
        }
        .rightValue {
            span {
                font-size: 15px !important;
            }
        }
    }
    .gjw-list .gjw-list-list .gjw-list-item .item {
        width: calc((100% - 50px) / 5) !important;
    }
}

@media screen and (min-width: 1910px) {
    .selectValue {
        .value {
            font-size: 16px !important;
        }
        .rightValue {
            span {
                font-size: 16px !important;
            }
        }
    }
    .gjw-list .gjw-list-list .gjw-list-item .item {
        width: calc((100% - 60px) / 6) !important;
    }
}

.custom-tree-node {
    width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.main {
    background-color: #fff;
    height: calc(100vh - 100px);
    margin: 10px 0;
    position: relative;
}
.main .content {
    padding: 10px;
    background-color: #fff;
    display: flex;
}
.leftArrow {
    width: 300px !important;
}
.rightArrow {
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
.leftTable {
    max-width: calc(100% - 320px);
}
.rightTable {
    max-width: calc(100% - 0px);
}
.treeContent {
    margin-right: 0;
    height: calc(100vh - 125px);
    transition: transform 0.3s;
    width: 300px;
    border-right: 1px solid #eee;
    padding-right: 10px;
}
.treeMain {
    height: calc(100vh - 175px);
    overflow: auto;
    margin-top: 10px;
}
.rightContent {
    background-color: #fff;
    height: calc(100vh - 100px);
    flex: 1;
    text-align: left;
}
.listCount {
    height: 90px;
    border: 1px solid #eeeef0;
    position: relative;
    background-color: #f5f9fc;
    border-radius: 4px;
}
.listCountLeft {
    width: 50%;
    float: left;
}
.listCountRight {
    width: 50%;
    float: left;
}
.listLine {
    width: 2px;
    height: 45px;
    background-color: #eeeef0;
    position: absolute;
    top: 22px;
    left: 51%;
}
.leftItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 20px;
}

.leftItem img {
    width: 50px;
}
.leftItem div {
    display: inline-block;
    margin-left: 15px;
    line-height: 30px;
    text-align: left;
}

.leftItem div label {
    font-size: 16px;
    display: block;
}

.leftItem div span {
    font-size: 14px;
    color: #757e8b;
}

.leftItem div span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.rightItem {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 22px;
}
.rightItem .itemTop {
    font-size: 14px;
    line-height: 27px;
}
.rightItem .itemTop label {
    font-size: 12px;
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 8px;
    margin-right: 10px;
}
.green {
    background-color: #5b95eb !important;
}
.gray {
    background-color: #555a6b !important;
}
.red {
    background-color: #af4531 !important;
}
.orange {
    background-color: #d69639 !important;
}
.greenColor {
    color: #5b95eb !important;
}
.grayColor {
    color: #555a6b !important;
}
.redColor {
    color: #af4531 !important;
}
.orangeColor {
    color: #d69639 !important;
}

.greenbottomBorder {
    border-color: #5b95eb !important;
}
.graybottomBorder {
    border-color: #555a6b !important;
}
.redbottomBorder {
    border-color: #af4531 !important;
}
.orangebottomBorder {
    border-color: #d69639 !important;
}

.rightItem .itemBottom {
    margin-top: 3px;
}
.rightItem .itemBottom span {
    font-size: 14px;
    color: #757e8b;
}
.rightItem .itemBottom span b {
    font-size: 20px;
    margin-right: 10px;
    color: #333;
}
.selectValue {
    display: flex;
    height: 50px;
    background: #f7f8fc;
    margin-top: 15px;
    border-radius: 4px;
    line-height: 50px;
}
.selectValue .value {
    margin-left: 20px;
    font-size: 16px;
}
.selectValue .rightValue {
    flex: 1;
    text-align: right;
    margin-right: 20px;
}
.selectValue .rightValue span {
    font-size: 16px;
    color: #666;
}
.selectValue .rightValue span b {
    font-size: 16px;
    color: #333;
}
.selectValue .rightValue span label {
    width: 10px;
    display: inline-block;
    height: 10px;
    border-radius: 10px;
    margin-left: 40px;
    margin-right: 5px;
}
.roomContent {
    height: calc(100vh - 230px);
    overflow-y: auto;
}
.gjw-list {
    /* height: calc(100vh - 168px); */
    background: #fff;
    margin-top: 10px;
    /* padding: 10px; */
}
.gjw-list .gjw-list-list {
    height: calc(100vh - 355px);
    overflow-y: auto;
    padding-top: 0px;
    &::-webkit-scrollbar {
        width: 8px; // 滚动条宽度
        display: none;
    }
}
.gjw-list .gjw-list-list .gjw-list-item {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 10px;
    padding-top: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
    margin-right: 10px;
    width: calc((100% - 60px) / 6);
    // height: 100px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
    position: relative;
    height: fit-content;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    background-color: #55cca4;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    overflow: hidden;
}
.gjw-list .gjw-list-list .gjw-list-item .item .db {
    background-color: #55cca4;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sb {
    background-color: #6caae5;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
    float: left;
    margin: 10px 6px 0 10px;
    width: 16px;
    height: 16px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
    font-size: 14px;
    float: left;
    max-width: 58%;
    overflow: hidden; /* 超出部分隐藏 */
    white-space: nowrap; /* 文本不换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
    float: right;
    height: 35px;
    text-align: right;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
    float: right;
    margin-right: 0;
    cursor: pointer;
    img {
        cursor: pointer;
    }
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
    font-size: 12px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
    float: right;
    width: 10px;
    margin-right: 10px;
    cursor: pointer;
    img {
        cursor: pointer;
    }
    i {
        font-size: 20px;
        cursor: pointer;
    }
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 8px;
    float: right;
    margin-right: 10px;
    margin-top: 14px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
    background-color: #00ffa9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
    background-color: #77dbb9;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
    background-color: #00ffa9;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
    background-color: #fff;
    // height: 65px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    border: 2px solid;

    .item-bottom-money {
        line-height: 30px;
        width: 100%;
        text-align: center;
        font-size: 14px;
    }
    .item-bottom-device {
        width: 94%;
    }

    .item-bottom-device-item {
        position: relative;
        .itemContextMenu {
            box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
            position: absolute;
            top: -65px;
            right: -5px;
            z-index: 2;
            background-color: #fff;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            cursor: pointer;
            img {
                margin-right: 10px;
                width: 20px;
                height: 20px;
                display: inline-block;
                cursor: pointer;
            }
            div {
                line-height: 20px;
                display: flex;
                margin-bottom: 10px;
                cursor: pointer;
                width: 100%;
                &:last-child {
                    margin-bottom: 0;
                }
                &:hover {
                    background-color: rgba(0, 0, 0, 0.2);
                    cursor: pointer;
                }
            }
        }
        .item-bottom-device-item-content {
            text-align: center;
            background-color: #fff;
            line-height: 30px;
            color: #333;
            font-size: 12px;
            border: 2px solid red;
            margin-bottom: 10px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
        }
        .greenBorder {
            border-color: #5b95eb !important;
        }
        .grayBorder {
            border-color: #555a6b !important;
        }
        .redBorder {
            border-color: #af4531 !important;
        }
        .orangeBorder {
            border-color: #d69639 !important;
        }
    }
}
.gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
    background-color: #e2f7f0 !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
    background-color: #e9f6fe !important;
}
.gjw-list .gjw-list-list .gjw-list-item .item .yc {
    background-color: #f4f4f4 !important;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
    font-size: 14px;
    color: #666;
    padding-top: 13px;
    padding-bottom: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
    font-size: 14px;
    color: #666;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
    margin-left: 10px;
    margin-right: 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
    font-size: 14px;
    color: #333;
}
.gjw-list .gjw-list-page {
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: -10px;
}
.cursor {
    // cursor: pointer;
}
.noData {
    display: flex;
    margin-top: 20%;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
</style>
